<template>
  <view class="salesRecord">
    <view class="saleTitle">
      <view class="saleTitle__left">
        <p>{{ toThousand(2345.83) }}</p>
        <p>总销售</p>
      </view>
      <view class="saleTitle__right">
        <p>{{ toThousand(1234.51) }}</p>
        <p>总佣金</p>
      </view>
    </view>

    <view class="salesList">
      <!-- 筛选 -->
      <view class="sale__filter">
        <p>销售记录明细</p>
        <view class="filter">
          <span>筛选</span>
          <image src="/static/image/mine/sale/filter.png" />
        </view>
      </view>
      <!-- 渲染销售记录 -->
      <view v-for="saleOrder in orderList" :key="saleOrder.id" class="saleOrder">
        <view class="sale__left">
          <p>订单号：{{ saleOrder.id }}</p>
          <p>总金额：{{ saleOrder.allMon }}元</p>
        </view>
        <view class="sale__right">
          <p>{{ saleOrder.lirun }}</p>
          <p>{{ saleOrder.time }}</p>
        </view>
      </view>
    </view>
    <p class="tips">———— 已经到底了 ————</p>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          id: '123',
          allMon: '200',
          lirun: '+19.0',
          time: '2020-12-13'
        },
        {
          id: '1234',
          allMon: '200',
          lirun: '-21.0',
          time: '2020-12-13'
        },
        {
          id: '12345',
          allMon: '200',
          lirun: '+19.0',
          time: '2020-12-13'
        },
        {
          id: '12345',
          allMon: '200',
          lirun: '+19.0',
          time: '2020-12-13'
        },
        {
          id: '1236',
          allMon: '200',
          lirun: '+19.0',
          time: '2020-12-13'
        },
        {
          id: '1234123',
          allMon: '200',
          lirun: '-12.0',
          time: '2020-12-13'
        },
        {
          id: '121253',
          allMon: '200',
          lirun: '+33.0',
          time: '2020-12-13'
        },
        {
          id: '1231254',
          allMon: '200',
          lirun: '+22.0',
          time: '2020-12-13'
        }
      ]
    }
  },
  created() {
  },
  methods: {
    toThousand(num) {
      return num && num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
          return $1 + ','
        })
    }
  }
}
</script>

<style>
.sale__filter {
  box-sizing: border-box;
  width: 100%;
  padding: 30rpx 30rpx 10rpx 30rpx;
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 600;
}

.filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #9B9B9B;
}
.filter > image {
  width: 48rpx;
  height: 48rpx;
}

.salesRecord{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F8F8F8;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
.saleTitle{
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #ffffff;
  font-size: 44rpx;
  text-align: center;
  box-sizing: border-box;
  height: 218rpx;
  width: 750rpx ;
  background-image: url('/static/image/mine/salebg.png');
  background-size: 100%;
}
.saleTitle >view {
  flex: 1;
}
.saleTitle >view:nth-child(1){
  border-right: 2rpx solid rgba(255, 255, 255, 0.4);
}
.saleTitle >view>p:nth-child(2){
  font-size: 28rpx;
  margin-top: 15rpx;
}

.salesList {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 710rpx;
  border-radius: 8rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
  margin-top: 40rpx;
}

.saleOrder {
  height: 136rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 30rpx 20rpx 30rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sale__left,.sale__right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sale__right{
  align-items: flex-end;
}
.sale__left>p:nth-child(2),.sale__right>p:nth-child(2) {
  font-size: 24rpx;
  color: #9B9B9B;
}
.sale__left>p:nth-child(1) {
  font-size: 28rpx;
  color: #000000;
}
.sale__right>p:nth-child(1) {
  font-size: 44rpx;
  color: #DD3939;
}
.tips {
  margin-top:40rpx;
  font-size: 24rpx;
  color: #CCCCCC;
}
</style>
